<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";

// 导航栏
import { ComponentSize, ElMessage } from "element-plus";
import {
  addService,
  deleteByIdService,
  editByIdService,
  getByIdService,
  listByPageService,
} from "@/api/root/technician";
import { typeListService } from "@/api/root/type";
const currentPage = ref(1); //当前页数
const pageSize = ref(7); //每页条数
const total = ref(100); //总条数

const size = ref<ComponentSize>("large");
const background = ref(true);
const disabled = ref(false);

const handleCurrentChange = (num) => {
  //页数改变触发函数
  currentPage.value = num;
};

let typeIdSearch = ref(); //条件查询-类型id
let nameSearch = ref(); //条件查询-姓名
const technicianData = ref();
const typeData = ref();

//技师详情信息表单
const title = ref("");
const editFormVisible = ref(false);
import type { FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const validateName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("名字不能设置为空"));
  } else {
    callback();
  }
};
const validateType = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("类型不能设置为空"));
  } else {
    callback();
  }
};

const technicianForm = ref({
  id: "",
  typeId: "",
  name: "",
});

const rules = ref<FormRules<typeof technicianForm>>({
  typeId: [{ validator: validateType, trigger: "blur" }],
  name: [{ validator: validateName, trigger: "blur" }],
});

//条件分页获取食物列表
const listByPage = async () => {
  let params = {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
    typeId: typeIdSearch.value ? typeIdSearch.value : null,
    name: nameSearch.value ? nameSearch.value : null,
  };
  let result = await listByPageService(params);

  technicianData.value = result.data.items;
  total.value = result.data.total;

  //处理数据

  typeData.value = (await typeListService()).data;
  for (let i = 0; i < technicianData.value.length; i++) {
    let technician = technicianData.value[i];
    for (let j = 0; j < typeData.value.length; j++) {
      if (technician.typeId == typeData.value[j].id) {
        technician.typeId = typeData.value[j].name;
      }
    }
  }
};
listByPage();

//重置查询条件函数
const resetSearch = () => {
  typeIdSearch.value = "";
  nameSearch.value = "";
  listByPage();
};

//根据id获取技师信息
const getById = async (id) => {
  title.value = "修改员工信息";
  let result = await getByIdService(id);
  technicianForm.value = result.data;
  editFormVisible.value = true;
};

//清空技师数据模型
const clearForm = () => {
  ruleFormRef.value.resetFields();
  technicianForm.value = {
    id: "",
    typeId: "",
    name: "",
  };
};

//修改信息函数
const editById = () => {
  ruleFormRef.value.validate(async (v) => {
    if (v) {
      await editByIdService(technicianForm.value);
      ElMessage.success("修改成功");
      listByPage();
      editFormVisible.value = false;
    } else {
      ElMessage.error("请按规范填写");
    }
  });
};

//新增
const add = async () => {
  ruleFormRef.value.validate(async (v) => {
    if (v) {
      await addService(technicianForm.value);
      ElMessage.success("新增成功");
      listByPage();
      editFormVisible.value = false;
    } else {
      ElMessage.error("请按规范填写");
    }
  });
};

//删除函数
const deleteById = async (id) => {
  await deleteByIdService(id);
  ElMessage.success("删除成功");
  listByPage();
};

//技师时长薪资柱状图
import * as echarts from "echarts";
const charts = ref();
//柱状图函数
const WeCharts = async () => {
  await listByPage();

  let myChart = echarts.init(charts.value);
  myChart.setOption({
    title: {
      text: "当前页技师时长与薪资表",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: technicianData.value.map((item) => item.name),
    },
    series: [
      {
        name: "时长",
        type: "bar",
        data: technicianData.value.map((item) => item.workHours),
      },
      {
        name: "薪资",
        type: "bar",
        data: technicianData.value.map((item) => item.salary),
      },
    ],
  });
};
onMounted(async () => {
  WeCharts();
});
</script>

<template>
  <div style="display: flex; justify-content: space-around">
    <el-card style="min-width: 600px">
      <!-- 条件查询 -->
      <div style="display: flex; justify-content: space-around">
        <!-- 类型 -->
        <el-select v-model="typeIdSearch" placeholder="类型" style="width: 160px">
          <el-option
            v-for="item in typeData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @change="listByPage()"
          />
        </el-select>
        <!-- 姓名模糊 -->
        <el-input
          v-model="nameSearch"
          style="width: 240px"
          placeholder="输入查询的姓名"
          :prefix-icon="Search"
          @input="listByPage()"
        />
        <!-- 按钮 -->
        <el-button type="info" @click="resetSearch">重置</el-button>
        <el-button
          type="primary"
          @click="
            title = '新增员工信息';
            editFormVisible = true;
            clearForm();
          "
          >添加</el-button
        >
      </div>

      <el-table :data="technicianData" stripe style="width: 580px; height: 380px">
        <el-table-column prop="typeId" label="类型" width="120" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="workHours" label="工时" width="80" />
        <el-table-column prop="salary" label="工资" width="120" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" :icon="Edit" circle @click="getById(row.id)" />
            <el-popconfirm
              title="确定要删除该数据吗？"
              @cancel="ElMessage('您取消了删除')"
              @confirm="deleteById(row.id)"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 导航栏 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <div ref="charts" style="min-width: 600px; height: 500px"></div>
  </div>

  <!-- 技师信息修改、新增表单 -->
  <el-dialog v-model="editFormVisible" :title="title" width="500">
    <el-form :model="technicianForm"> </el-form>
    <template #footer>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px; padding-left: 100px"
        :model="technicianForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="类型：" prop="typeId">
          <el-select
            v-model="technicianForm.typeId"
            placeholder="类型"
            style="width: 160px"
          >
            <el-option
              v-for="item in typeData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="technicianForm.name"
            autocomplete="off"
            style="width: 200px"
          />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="title == '修改员工信息' ? editById() : add()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
